<template>
	<div id="app">
		<el-row>
			<el-col :span="24">
				<el-form :model="queryWhere" :inline="true">
					<el-form-item label="会员账号">
						<el-input v-model.lazy="queryWhere.username"></el-input>
					</el-form-item>

				</el-form>

			</el-col>
		</el-row>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>

		<el-table :data="addressList" stripe border style="width: 100%">
			​ <el-table-column prop="username" label="会员账号"></el-table-column>
			<el-table-column prop="name" label="收货人姓名"></el-table-column>
			<el-table-column prop="tel" label="手机号"></el-table-column>
			<el-table-column prop="address" label="收货地址"></el-table-column>
			<el-table-column label="默认地址">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.is_default == 1" type="success">是 </el-tag>
					<el-tag v-if="scope.row.is_default == 0" type="danger">否 </el-tag>
				</template>
			</el-table-column>

		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>

	</div>
</template>

<script>
	export default {
		created: function() {
			this.access_token = window.sessionStorage.getItem("token");
		},
		mounted: function() {
			this.initTableData();
		},
		methods: {
			initTableData: function() {
				let _this = this;
				let url = "/api/mall/AddressServlet.do?method=query&access_token=" + this.access_token;

				this.$http.get(url, {
					params: _this.queryWhere
				}).then(function(response) {
					console.log("服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.queryWhere.currentPage = response.data.data.currentPage;
						_this.pageInfo.totalPage = response.data.data.totalPage;
						_this.pageInfo.totalRecord = response.data.data.totalRecord;

						_this.pageInfo.pageSize = response.data.data.pageSize;

						_this.addressList = response.data.data.data;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},

			handleSizeChange: function(pageSize) {
				//alert("修改了每页显示的记录数",val);
				//console.log("修改了每页显示的记录数",val)
				this.queryWhere.pageSize = pageSize;
				this.initTableData(); //重新查数据库。。
			},
			handleCurrentChange: function(curPage) {
				this.queryWhere.currentPage = curPage; //当页页
				this.initTableData(); //重新查数据库。。
			},

		},
		watch: {
			"queryWhere.username": function(newQuestion, oldQuestion) {
				this.initTableData();
			}
		},
		data: function() {
			return {
				//记录token
				access_token: "",
				queryWhere: {
					username: "",
					currentPage: 1,
					// pageSize: 5
				},
				pageInfo: {
					pageSize: 5,
					totalPage: 0,
					totalRecord: 0
				},
				addressList: [],
			}
		}
	}
</script>

<style>
</style>
